<template>
    <!-- 1.获取元素 -->
   <h2 ref="titleRef">我是标题</h2>
   <button ref="btn" >按钮</button>
   <!-- 2.获取组件实例 -->
    <show-info ref="componentRef"></show-info>
   <button @click="getElements">获取元素</button>
</template>
<script>
import { onMounted, reactive ,ref} from 'vue'
import ShowInfo from './ShowInfo.vue'
    export default {
        mounted(){
        },  
        components:{ShowInfo},
        setup(){
            const titleRef = ref()
            const componentRef = ref()
            // setup 元素还没有渲染出来

            console.log(titleRef.value,'setUp');
            const getElements = ()=>{
                console.log(titleRef.value);
            }
            onMounted(()=>{
                console.log(titleRef.value,'onMouted');
                console.log(componentRef.value,'onMouted');
                componentRef.value.showInfoFoo()
            })
                return{
                    titleRef,
                    componentRef,
                    getElements
                }
        }
    }
</script>
<style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
</style>